{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button, fxa_email_form with context %}

{% if switch('download_as_default') and not needs_data_consent(country_code) and ftl_has_messages('firefox-desktop-set-as-default') %}
  {% set download_as_default_enabled = true %}
{% else %}
  {% set download_as_default_enabled = false %}
{% endif %}

{% macro default_browser_checkbox(id='default-browser-checkbox') -%}
<label for="{{ id }}" class="default-browser-label hidden">
  <input type="checkbox" id="{{ id }}" class="default-browser-checkbox">
  {{ ftl('firefox-desktop-set-as-default') }}
</label>
{%- endmacro %}

{% extends "firefox/new/desktop/base.html" %}

{% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=firefox-desktop' %}
{% set ios_url = app_store_url('firefox', 'mozilla-org-firefox-new') %}

{% block string_data %}{% endblock %}

{% block page_image %}
  {% if LANG.startswith('en-') %}
    {{ static('img/firefox/new/desktop/meta-img-en.png') }}
  {% elif LANG.startswith('es-') %}
    {{ static('img/firefox/new/desktop/meta-img-es.png') }}
  {% else %}
    {{ static('img/firefox/new/desktop/meta-img-global.png') }}
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ super() }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('protocol-emphasis-box') }}
  {{ css_bundle('firefox_desktop_download') }}

  <!--[if IE 9]>
    {{ css_bundle('firefox_desktop_download_ie9') }}
  <![endif]-->

  <!--[if lt IE 9]>
    {{ css_bundle('firefox_desktop_download_ie8') }}
  <![endif]-->
{% endblock %}

{% macro download_picture(src, width, height, alt='', class_name='') -%}
  {{ picture(
    url='img/firefox/new/desktop/ie8/' + src + '.png',
    sources=[
      {
        'type': 'image/svg+xml',
        'srcset': {
          'img/firefox/new/desktop/' + src + '.svg': 'default'
        }
      }
    ],
    optional_attributes={
      'class': class_name,
      'loading': 'lazy',
      'width': width,
      'height': height
    }
  ) }}
{%- endmacro %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}

{% set show_mr106_browser_promo = switch('download-firefox-mr106-promo', ['en-US', 'en-CA', 'en-GB', 'fr', 'de']) %}

{% if outdated %}

  {% set update_url = 'href="%s" data-cta-text="Update to the latest version"'|safe|format(('https://support.mozilla.org/kb/update-firefox-latest-release' + referrals)) %}

  {% if ftl_has_messages('firefox-desktop-out-of-date') %}
    <aside class="c-page-header-notification">
      <div class="mzp-c-notification-bar mzp-t-warning">
        {{ ftl('firefox-desktop-out-of-date', update_url=update_url) }}
      </div>
    </aside>
  {% endif %}

{% endif %}

<main class="main-download" {% if variation %}data-variation="{{ variation }}"{% endif %}>
  <section id="desktop-banner" class="c-block t-intro show-else mzp-has-media-hide-on-sm">
    <div class="c-block-container">
      <div class="c-block-body">
        <h1 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-desktop-download-firefox') }}</h1>
          <h2 class="mzp-has-zap-7">{{ ftl('firefox-desktop-download-get-the-browser') }}</h2>
          <p>{{ ftl('firefox-desktop-download-fast-reliable-private') }}</p>
        <div class="c-intro-download">
          {% block primary_cta %}
            {{ default_browser_checkbox(id='default-browser-checkbox-primary') }}
            {{ download_firefox_thanks(locale_in_transition=True, download_location='primary cta') }}
          {% endblock %}

          <div class="c-intro-download-alt"><a href="{{ url('firefox.all') }}">{{ ftl('firefox-desktop-download-download-options') }}</a></div>

          <div class="c-intro-download-alt"><a href="https://support.mozilla.org/products/firefox{{ referrals }}&utm_content=browser-support" rel="external noopener" data-cta-text="Firefox browser support">{{ ftl('firefox-desktop-download-browser-support') }}</a></div>
        </div>
      </div>
      <div class="c-block-media l-v-center">
        <div class="c-block-img">
          <div class="c-noodles">
            <!--[if gt IE 9]><!-->
            <div class="noodle-circle t-outline-yellow"></div>
            <div class="noodle-svg">
              <svg width="537" height="502" viewBox="0 0 537 502" xmlns="http://www.w3.org/2000/svg">
                <linearGradient x1="0%" y1="50%" x2="100%" y2="75%" id="yellow-pink">
                  <stop stop-color="#ffde4d" offset="0"/>
                  <stop stop-color="#ff31a3" offset="1"/>
                </linearGradient>
                <path transform="translate(-28 -3)" d="M243.358 14.088c38.422 22.008 52.309 70.656 31.478 109.807l-1.157 2.317c-19.906 37.529-6.25 84.093 31.015 104.71 37.264 20.618 84.018 7.645 105.08-29.189l1.39-2.316c22.219-38.688 71.519-52.587 110.866-30.811 39.58 22.007 53.93 72.046 31.941 111.66-64.807 116.99-212.013 159.151-328.667 94.286-117.116-64.865-159.472-212.201-94.665-329.19C152.396 5.98 201.464-8.383 241.043 12.698l1.158.695 1.157.695z" fill="url(#yellow-pink)" />
              </svg>
            </div>
            <div class="noodle-circle t-fill-yellow-orange"></div>
            <div class="noodle-pill t-fill-blue"></div>
            <div class="noodle-pill t-outline-pink"></div>
            <div class="noodle-browser">
              {{ picture(
                url='img/firefox/new/desktop/firefox-browser-light-600-v2.png',
                sources=[
                  {
                    'media': '(min-width: 688px)',
                    'srcset': {
                      'img/firefox/new/desktop/firefox-browser-light-1200-v2.png': '2x',
                      'img/firefox/new/desktop/firefox-browser-light-600-v2.png': 'default'
                    }
                  },
                  {
                    'media': '(max-width: 687px)',
                    'srcset': {
                      'img/placeholder.png': 'default'
                    }
                  }
                ],
                optional_attributes={
                  'height': '433',
                  'width': '600'
                }
              )}}
            </div>
            <!--<![endif]-->
          </div>
        </div>
      </div>
    </div>
  </section>

{% if show_mr106_browser_promo %}
  {% if LANG == 'fr' %}
    {% set features_section_title = 'Les <strong>dernières</strong> fonctionnalités de Firefox' %}
    {% set feature1_title = 'Reprenez où vous en étiez' %}
    {% set feature1_body = 'Firefox View vous permet de voir vos onglets ouverts sur d’autres appareils  et votre historique récent.' %}
    {% set feature2_title = 'Éditez vos PDF dans Firefox' %}
    {% set feature2_body = 'Finie l’impression des PDF. Modifiez vos formulaires directement dans Firefox.' %}
    {% set feature3_title = 'Naviguez en toute sécurité' %}
    {% set feature3_body = 'La protection totale contre les cookies de Firefox vous offre une confidentialité hors pair par défaut.' %}
  {% elif LANG == 'de' %}
    {% set features_section_title = 'Die <strong>neuesten</strong> Firefox Funktionen' %}
    {% set feature1_title = 'Mach da weiter, wo du aufgehört hast' %}
    {% set feature1_body = 'Firefox View zeigt dir deine offenen Tabs von anderen Geräten und den aktuellen Verlauf.' %}
    {% set feature2_title = 'PDFs direkt bearbeiten' %}
    {% set feature2_body = 'Nie wieder ein PDF ausdrucken. Bearbeite jetzt Dokumente direkt in Firefox.' %}
    {% set feature3_title = 'Spürbar geschützt Browsen' %}
    {% set feature3_body = 'Der vollständige Cookie-Schutz von Firefox gibt dir standardmäßig höchste Privatsphäre.' %}
  {% else %}
    {% set features_section_title = '<strong>Latest</strong> Firefox features' %}
    {% set feature1_title = 'Pick up where you left off' %}
    {% set feature1_body = 'Firefox View lets you see your tabs open on other devices and recent history.' %}
    {% set feature2_title = 'Edit your PDFs directly' %}
    {% set feature2_body = 'Forget printing a PDF ever again. Start editing forms in Firefox directly.' %}
    {% set feature3_title = 'Browse knowing you’re protected' %}
    {% set feature3_body = 'Firefox’s Total cookie protection gives you outstanding privacy by default.' %}
  {% endif %}

  <section class="mzp-l-content t-releases">
    <div class="mzp-c-emphasis-box js-animate">
      <h2 class="mzp-c-section-heading mzp-has-zap-8">{{ features_section_title|safe }}</h2>

      <ul class="c-trio">
        <li>
          {{ download_picture('feature-fxview', 84, 64) }}
          <h3 class="mzp-u-title-xs">{{ feature1_title }}</h3>
          <p>{{ feature1_body }}</p>
        </li>
        <li>
          {{ download_picture('feature-pdf-edit', 68, 64) }}
          <h3 class="mzp-u-title-xs">{{ feature2_title }}</h3>
          <p>{{ feature2_body }}</p>
        </li>

        <li>
          {{ download_picture('feature-tracking-protection-shield', 64, 64) }}
          <h3 class="mzp-u-title-xs">{{ feature3_title }}</h3>
          <p>{{ feature3_body }}</p>
        </li>
      </ul>

    {% if LANG.startswith('en-') %}
      <p class="c-notes"><a class="mzp-c-cta-link" href="{{ url('firefox.notes') }}" data-cta-text="See Release Notes">See Release Notes</a></p>
    {% endif %}
    </div>
  </section>
{% elif LANG.startswith('en-') %}
  <section class="mzp-l-content t-releases">
    <div class="mzp-c-emphasis-box js-animate">
      <h2 class="mzp-c-section-heading mzp-has-zap-8"><strong>Latest</strong> Firefox features</h2>

      <ul class="c-trio">
        <li>
          {{ download_picture('picture-in-picture', 64, 64) }}
          <h3 class="mzp-u-title-xs">Picture-in-Picture</h3>
          <p>Pop a video out of the browser window so you can stream and multitask.</p>
        </li>
        <li>
          {% if switch('browser-mr2-promo') %}
            {{ download_picture('color-ways', 64, 64) }}
            <h3 class="mzp-u-title-xs">Choose your color</h3>
            <p>Personalize your experience with new colorways.</p>
          {% else %}
            {{ download_picture('dark-mode', 64, 64) }}
            <h3 class="mzp-u-title-xs">Expanded Dark Mode</h3>
            <p>Take it easy on your eyes every time you go online.</p>
          {% endif %}
        </li>
        <li>
          {{ download_picture('lock', 64, 64) }}
          <h3 class="mzp-u-title-xs">An extra layer of protection</h3>
          <p>DNS over HTTPS (DoH) helps keep internet service providers from selling your data.</p>
        </li>
      </ul>

      <p class="c-notes"><a class="mzp-c-cta-link" href="{{ url('firefox.notes') }}" data-cta-text="See Release Notes">See Release Notes</a></p>
    </div>
  </section>
{% endif %}

  <section class="t-highlights">
    <h2 class="mzp-c-section-heading mzp-has-zap-11">{{ ftl('firefox-desktop-download-do-what-you-do-v2') }}</h2>

    <div class="t-block c-block l-reversed">
      <div class="c-block-container">
        <div class="c-block-body l-v-center">
          <h3 class="mzp-u-title-sm">{{ ftl('firefox-desktop-download-we-block-the-ad') }}</h3>
          <p>{{ ftl('firefox-desktop-download-ads-are-distracting') }}</p>
          <button id="protection-report" type="button" class="mzp-c-cta-link">{{ ftl('firefox-desktop-download-see-your-report') }}</button>
        </div>
        <div class="c-block-media l-v-end l-h-end l-media-constrain-on-sm">
          {{ resp_img(
            url='img/firefox/new/desktop/block-mr1.jpg',
            srcset={
              'img/firefox/new/desktop/block-mr1-high-res.jpg': '2x'
            },
            optional_attributes={
              'width': '504',
              'height': '343',
              'loading': 'lazy',
              'class': 'c-block-media-img'
            }
          ) }}
        </div>
      </div>
    </div>

    <div class="t-everyone c-block">
      <div class="c-block-container">
        <div class="c-block-body l-v-center l-h-end">
          <h3 class="mzp-u-title-sm">{{ ftl('firefox-desktop-download-for-everyone') }}</h3>
          <p>{{ ftl('firefox-desktop-download-available-in-over') }}</p>
          <p><a id="system-requirements" href="{{ url('firefox.sysreq') }}" class="mzp-c-cta-link" data-cta-text="Review system requirements">{{ ftl('firefox-desktop-download-review-system-req') }}</a></p>
        </div>
        <div class="c-block-media l-v-center l-h-start l-media-constrain-on-sm">
          {{ download_picture('everyone', 367, 302, '', 'mzp-c-block-media-img') }}
        </div>
      </div>
    </div>

    <div class="t-devices c-block l-reversed">
      <div class="c-block-container">
        <div class="c-block-body l-v-center">
          <h3 class="mzp-u-title-sm">{{ ftl('firefox-desktop-download-all-your-devices') }}</h3>
          <p>{{ ftl('firefox-desktop-download-take-your-privacy') }}</p>
          <div class="mobile-download-buttons-wrapper">
            {% block mobile_secondary_cta %}
              <ul class="mobile-download-buttons">
                <li class="android">
                  {{ google_play_button() }}
                </li>
                <li class="ios">
                  {{ apple_app_store_button(href=ios_url) }}
                </li>
              </ul>
            {% endblock %}
          </div>
        </div>
        <div class="c-block-media l-v-end l-h-end l-media-constrain-on-sm">
          {{ resp_img(
            url='img/firefox/new/desktop/devices.jpg',
            srcset={
              'img/firefox/new/desktop/devices-high-res.jpg': '2x'
            },
            optional_attributes={
              'width': '483',
              'height': '491',
              'loading': 'lazy',
              'class': 'c-block-media-img'
             }
          ) }}
        </div>
      </div>
    </div>
  </section>

  <section class="t-features">
    <div class="mzp-l-content">
      <h2 class="mzp-c-section-heading mzp-has-zap-14">{{ ftl('firefox-desktop-download-do-it-all') }}</h2>
      <div class="mzp-l-card-third">
        <div class="mzp-c-card js-animate">
          {{ download_picture('search', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-search-smarter') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-search-from-address') }}</li>
            <li>{{ ftl('firefox-desktop-download-search-engine-options') }}</li>
            <li>{{ ftl('firefox-desktop-download-smart-search-suggestions') }}</li>
            <li>{{ ftl('firefox-desktop-download-bookmark-history') }}</li>
          </ul>
        </div>

        <div class="mzp-c-card js-animate">
          {{ download_picture('highlights', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-boost-your') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-works-with-google') }}</li>
            <li>{{ ftl('firefox-desktop-download-built-in-screenshot') }}</li>
            <li>{{ ftl('firefox-desktop-download-bookmarks-manager') }}</li>
            <li>{{ ftl('firefox-desktop-download-autosuggest-urls') }}</li>
            <li>{{ ftl('firefox-desktop-download-sync-across-devices') }}</li>
            <li>{{ ftl('firefox-desktop-download-reader-mode') }}</li>
            <li>{{ ftl('firefox-desktop-download-spell-check') }}</li>
            <li>{{ ftl('firefox-desktop-download-pinned-tabs') }}</li>
          </ul>
        </div>

        <div class="mzp-c-card js-animate">
          {{ download_picture('picture-in-picture', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-stream-share-play') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-block-autoplay-of') }}</li>
            <li>{{ ftl('firefox-desktop-download-picture-in-picture') }}</li>
            <li>{{ ftl('firefox-desktop-download-curated-content-on') }}</li>
            <li>{{ ftl('firefox-desktop-download-share-links') }}</li>
          </ul>
        </div>

        <div class="mzp-c-card js-animate">
          {{ download_picture('privacy', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-protect-your-privacy') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-third-party-cookie') }}</li>
            <li><a href="{{ url('firefox.features.fingerprinting') }}">{{ ftl('firefox-desktop-download-fingerprinter-blocking') }}</a></li>
            <li>{{ ftl('firefox-desktop-download-cryptominer-blocking') }}</li>
            <li>{{ ftl('firefox-desktop-download-private-browsing-mode') }}</li>
            <li>{{ ftl('firefox-desktop-download-individual-protections-report') }}</li>
          </ul>
        </div>

        <div class="mzp-c-card js-animate">
          {{ download_picture('passwords', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-secure-your-personal') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-breached-website-alerts') }}</li>
            <li>{{ ftl('firefox-desktop-download-built-in-password') }}</li>
            <li>{{ ftl('firefox-desktop-download-clear-history') }}</li>
            <li>{{ ftl('firefox-desktop-download-form-autofill') }}</li>
            <li>{{ ftl('firefox-desktop-download-automatic-updates') }}</li>
          </ul>
        </div>

        <div class="mzp-c-card js-animate">
          {{ download_picture('customize', 32, 32) }}
          <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-customize-your-browser') }}</h3>
          <ul class="mzp-u-list-styled">
            <li>{{ ftl('firefox-desktop-download-themes') }}</li>
            <li>{{ ftl('firefox-desktop-download-dark-mode') }}</li>
            <li>{{ ftl('firefox-desktop-download-library-of-extensions') }}</li>
            <li>{{ ftl('firefox-desktop-download-adjust-search-bar') }}</li>
            <li>{{ ftl('firefox-desktop-download-change-new-tab') }}</li>
          </ul>
        </div>
      </div>
      {% block features_cta %}
        {{ default_browser_checkbox(id='default-browser-checkbox-features') }}
        {{ download_firefox_thanks(dom_id='download-features', locale_in_transition=True, download_location='features cta') }}
      {% endblock %}
    </div>
  </section>

  <section class="mzp-l-content t-custom">
    <h2 class="mzp-c-section-heading mzp-has-zap-16">{{ ftl('firefox-desktop-download-make-firefox-your') }}</h2>

    <div class="c-screen">
      <!--[if gt IE 9]><!-->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1242 532" width="1242" height="532">
        <path fill="none" stroke="#ffba2d" stroke-width="2" d="M1198.8 232.3c4.7 3 6.1 9.1 3.2 13.8l-.2.3c-2.8 4.5-1.3 10.4 3.2 13.2 4.6 2.8 10.5 1.5 13.4-2.9l.2-.3c3.1-4.7 9.4-6 14.2-3.1 4.8 3 6.3 9.3 3.3 14.1-8.9 14.1-27.8 18.3-42 9.5-14.3-8.8-18.7-27.4-9.8-41.4 3-4.7 9.3-6.2 14.1-3.3l.2.1h.2z"/>
        <linearGradient id="a2" x1="1046.5737" x2="1180.3937" y1="142.2743" y2="50.0583" gradientTransform="matrix(1 0 0 -1 0 519.0001)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#ffda65"/>
          <stop offset="1" stop-color="#ff9741"/>
        </linearGradient>
        <circle cx="1096.9" cy="411.4" r="120.5" fill="url(#a2)"/>
        <linearGradient id="b2" x1="-83.934" x2="122.2983" y1="-272.8492" y2="-30.4322" gradientTransform="matrix(.766 -.6428 -.6428 -.766 175.4476 172.2943)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#c857f1"/>
          <stop offset="1" stop-color="#2ebffc"/>
        </linearGradient>
        <path fill="url(#b2)" d="M45.1 300.6l323-271C421.4-15.3 501-8.3 545.8 45.1l.2.2c44.8 53.4 37.8 132.9-15.5 177.7l-323 271C154 538.7 74.4 531.8 29.7 478.4l-.2-.2c-44.8-53.3-37.8-132.9 15.6-177.6z"/>
        <path fill="none" stroke="#ff008b" stroke-width="2" d="M130.5 193.8L522.4 58.9c52.9-18.2 110.5 9.9 128.7 62.8h0c18.2 52.9-9.9 110.5-62.8 128.7L196.5 385.3c-52.9 18.2-110.5-9.9-128.7-62.8h0c-18.3-52.9 9.8-110.5 62.7-128.7z"/>
        <circle cx="811.9" cy="81.2" r="12" fill="#ff008b"/>
        <linearGradient id="c2" x1="733.0189" x2="647.999" y1="-193.4654" y2="-16.5744" gradientTransform="scale(1 -1) rotate(32.997 1111.38555617 211.5247949)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#f80089"/>
          <stop offset="1" stop-color="#b833e1"/>
        </linearGradient>
        <path fill="url(#c2)" d="M678 256.3L981.8 59.1c58.4-37.9 136.5-21.3 174.5 37.1l.1.2c37.9 58.4 21.3 136.5-37.1 174.5L815.5 468.1C757.1 506 679 489.4 641.1 431l-.1-.2c-38-58.4-21.4-136.5 37-174.5z"/>
      </svg>
      <!--<![endif]-->
      <div class="c-screenshot">
        {{ resp_img(
          url='img/firefox/new/desktop/firefox-new-tab-1000-v2.png',
          srcset={
            'img/firefox/new/desktop/firefox-new-tab-2000-v2.png': '2000w',
            'img/firefox/new/desktop/firefox-new-tab-1800-v2.png': '1800w',
            'img/firefox/new/desktop/firefox-new-tab-1600-v2.png': '1600w',
            'img/firefox/new/desktop/firefox-new-tab-1400-v2.png': '1400w',
            'img/firefox/new/desktop/firefox-new-tab-1200-v2.png': '1200w',
            'img/firefox/new/desktop/firefox-new-tab-1000-v2.png': '1000w',
            'img/firefox/new/desktop/firefox-new-tab-800-v2.png': '800w',
          },
          sizes={
            '(min-width: 1200px)': '930px',
            'default': '90vw'
          },
          optional_attributes={
            'width': '1000',
            'height': '397',
            'loading': 'lazy'
          }
        ) }}
      </div>
    </div>

    <ul class="c-trio">
      <li>
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-extensions-for-every') }}</h3>
        {% set extensions_attrs = 'href="https://addons.mozilla.org/firefox/extensions/%s" rel="external noopener" data-cta-text="extension for everyone"'|safe|format(referrals) %}
        <p>{{ ftl('firefox-desktop-download-from-security-to', attrs=extensions_attrs) }}</p>
      </li>

      <li>
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-change-up-your') }}</h3>
        <p>{{ ftl('firefox-desktop-download-go-from-light') }}</p>
      </li>

      <li>
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-tweak-your-settings') }}</h3>
        <p>{{ ftl('firefox-desktop-download-theres-no-need') }}</p>
      </li>
    </ul>
  </section>

  <section id="non-profit" class="mzp-l-content t-company">
    <h2 class="mzp-c-section-heading mzp-has-zap-9">{{ ftl('firefox-desktop-download-backed-by-the') }}</h2>

    <div class="mzp-l-card-half">
      <div class="mzp-c-card">
        {{ resp_img(
          url='img/firefox/new/desktop/person-mozilla.jpg',
          srcset={
            'img/firefox/new/desktop/person-mozilla-high-res.jpg': '2x'
          },
          optional_attributes={
            'width': '436',
            'height': '463',
            'loading': 'lazy'
          }
        ) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-challenging-the-status') }}</h3>
        {% set created_attrs = 'href="%s" data-cta-text="created by Mozilla"'|safe|format(url('mozorg.about.index')) %}
        <p>{{ ftl('firefox-desktop-download-firefox-was-created', attrs=created_attrs) }}</p>
      </div>

      <div class="mzp-c-card">
        {{ resp_img(
          url='img/firefox/new/desktop/person-privacy.jpg',
          srcset={
            'img/firefox/new/desktop/person-privacy-high-res.jpg': '2x'
          },
          optional_attributes={
            'width': '436',
            'height': '463',
            'loading': 'lazy'
          }
        ) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-your-privacy-comes') }}</h3>
        {% set internet_attrs = 'href="%s" data-cta-text="Personal Data Promise"'|safe|format(url('privacy')) %}
        <p>{{ ftl('firefox-desktop-download-as-the-internet-v2', attrs=internet_attrs) }}</p>
      </div>
    </div>
  </section>

  <section class="mzp-l-content t-discover">
    <h2 class="mzp-c-section-heading mzp-has-zap-10">{{ ftl('firefox-desktop-download-keep-all-your') }}</h2>

    <div class="mzp-l-card-third">

      <div class="mzp-c-card js-animate">
        {{ download_picture('goog', '140', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-works-with-google') }}</h3>
        <p>{{ ftl('firefox-desktop-download-all-your-favourite') }}</p>
      </div>

      <div class="mzp-c-card js-animate">
        {{ download_picture('contain-mr1', '131', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-facebook-container') }}</h3>
        {% set addon_attrs = 'href="https://addons.mozilla.org/firefox/addon/facebook-container/%s" rel="external noopener" data-cta-text="Download this browser extension"'|safe|format(referrals) %}
        <p>{{ ftl('firefox-desktop-download-download-this-browser', attrs=addon_attrs) }}</p>
      </div>

      <div class="mzp-c-card js-animate">
        {{ download_picture('sync', '171', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-sync-your-devices') }}</h3>
        {% set available_attrs = fxa_link_fragment(entrypoint='mozilla.org-firefox-desktop') %}

        <p>{{ ftl('firefox-desktop-download-firefox-is-available-v2', attrs=available_attrs) }}</p>
      </div>

      <div class="mzp-c-card js-animate">
        {{ download_picture('screenshots-mr1', '131', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-screenshots') }}</h3>
        {% set screenshot_attrs = 'href="https://support.mozilla.org/kb/firefox-screenshots%s" rel="external noopener" data-cta-text="screenshot"'|safe|format(referrals) %}
        <p>{{ ftl('firefox-desktop-download-grab-a-high', attrs=screenshot_attrs) }}</p>
      </div>

      <div class="mzp-c-card js-animate">
        {{ download_picture('etp', '134', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-enhanced-tracking-protection') }}</h3>
        {% set automatically_attrs = 'href="https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop%s" rel="external noopener" data-cta-text="block many trackers"'|safe|format(referrals) %}
        <p>{{ ftl('firefox-desktop-download-firefox-automatically', attrs=automatically_attrs) }}</p>
      </div>

      <div class="mzp-c-card js-animate">
        {{ download_picture('pinp-mr1', '143', 138) }}
        <h3 class="mzp-u-title-xs">{{ ftl('firefox-desktop-download-picture-in-picture') }}</h3>
        <p>{{ ftl('firefox-desktop-download-from-watching-a') }}</p>
      </div>
    </div>
    {% block discover_cta %}
      {{ default_browser_checkbox(id='default-browser-checkbox-discover') }}
      {{ download_firefox_thanks(dom_id='download-discover', locale_in_transition=True, download_location='discover cta') }}
    {% endblock %}
  </section>

  <section class="c-support">
    {% set questions_attrs = 'href="https://support.mozilla.org/products/firefox%s&utm_content=mozilla-support" rel="external noopener" data-cta-text="Mozilla support"'|safe|format(referrals) %}
    {{ ftl('firefox-desktop-download-questions', attrs=questions_attrs) }}
  </section>

  <aside id="mobile-banner" class="show-android show-ios" data-nosnippet>
    <div class="c-mobile mzp-t-dark">
      <div class="mzp-l-content">
        <div class="c-mobile-text">
          <h2 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-desktop-download-firefox-browser') }}</h2>
          <h2 class="mzp-has-zap-7 mzp-u-title-md show-android">{{ ftl('firefox-desktop-download-get-firefox-android') }}</h2>
          <h2 class="mzp-has-zap-7 mzp-u-title-md show-ios">{{ ftl('firefox-desktop-download-get-firefox-ios') }}</h2>

          <p>{{ ftl('firefox-desktop-download-download-the-mobile') }}</p>

          {% block mobile_primary_cta %}
            <div class="show-android">
              {{ google_play_button() }}
            </div>
            <div class="show-ios">
              {{ apple_app_store_button(href=ios_url) }}
            </div>
          {% endblock %}
        </div>
      </div>
    </div>
    <h2 class="c-desktop">
      <a href="#next">{{ ftl('firefox-desktop-download-learn-about-the') }}</a>
    </h2>
    <span id="next"></span>
  </aside>
</main>

{% endblock %}

{% block js %}
  {{ js_bundle('firefox_desktop_download') }}

  {% if download_as_default_enabled %}
    {{ js_bundle('download_as_default') }}
  {% endif %}
{% endblock %}
